<template>
	<div class="bg">
		<goback title="订单详情"></goback>
		<div class="card">
			
			
			
			<div class="card_title" @click="goMsgBox" v-if="this.$store.getters.getUser.position==0">与企业的交易 : {{order.buyer.name}}</div>
			<div class="card_title" @click="goMsgBox" v-else-if="this.$store.getters.getUser.position==1">与农户的交易 : {{order.seller.name}}</div>

			<div class="who_buy">
				<div class="who_buy_img">
					<img :src="order.buyer.head_img" />
				</div>
				<div class="who_buy_detail">
					<div>{{order.content.type}}</div>
					<div>{{order.content.weight}} </div>
				</div>
			</div>
			<div class="card_con">
				<div class="box">
					<div class="box_title">类型: </div>
					<div class="box_info">{{order.content.type}}</div>
				</div>
				<div class="box">
					<div class="box_title">重量: </div>
					<div class="box_info">{{order.content.weight}}</div>
				</div>
				<div class="box">
					<div class="box_title">下单时间: </div>
					<div class="box_info">{{formatDate(order.timestamp)}}</div>
				</div>
				<div class="box">
					<div class="box_title">订单号: </div>
					<div class="box_info">{{order.ID}}</div>
				</div>
			</div>
		</div>

		<div class="card">
			<div class="card_title">交易类型</div>
			<div class="card_con">
				<div class="box">
					<div class="box_title">配送方式: </div>
					<div class="box_info">{{order.type}}</div>
				</div>
				<div class="box">
					<div class="box_title">发货地: </div>
					<div class="box_info">{{order.location}}</div>
				</div>
				<div class="box">
					<div class="box_title">收货地: </div>
					<div class="box_info">{{order.station}}</div>
				</div>
			</div>
		</div>

		<div class="card">
			<div class="card_title">交易进度</div>
			<div class="trade_process">
				<div v-for="(item,index) in status">
					<div :class="{
					            'normal_style': order.status < index,
					            'has_been_done': order.status === index,
					            'has_not_been_done': order.status > index
					        }">{{item}}</div>
				</div>
			</div>
			<div class="card_con">
				<div v-for="(item,index) in order.trade_status_log" class="statis_box">
					{{status[index]}} 
					<div class="statis_log">
						{{formatDate(item)}}
					</div>
				</div>
				当前状态正处于: {{status[order.status]}}
			</div>
		</div>

		<copyright></copyright>

	</div>
</template>

<script>
	export default {
		name: "orderdetail",
		props: ['current'],
		data() {
			return {
				status: ['待送货', '待企业确认', '待企业填写去向','已完成'],
				order: {
					timestamp: 0,
					ID: '0',
					buyer: {
						UID: '0',
						img_src: '',
						name: '0',
					},
					content: {
						type: '0',
						weight: '0'
					},
					status: 1,
					station: '01',
					type: '0',
					location: '01',
					trade_status_log: []
				},

			}
		},
		mounted() {
			// 通过this.$route.query直接访问URL的查询参数
			this.currentIndex = parseInt(this.$route.query.current);
			this.getData();
		},
		computed: {
		 
		},
		
		methods: {
			goMsgBox(){
				if(this.$store.getters.getUser.position==0){
					this.$router.push('/message?uid='+this.order.buyer.uid);
				}else{
					this.$router.push('/message?uid='+this.order.seller.uid);
				}
				
			},
			formatDate(timestamp) {
				const date = new Date(timestamp); // JavaScript时间戳是以毫秒为单位的，所以需要乘以1000  
				const year = date.getFullYear();
				const month = this.padZero(date.getMonth() + 1); // getMonth()返回的月份是从0开始的，所以需要加1  
				const day = this.padZero(date.getDate());
				const hour = this.padZero(date.getHours());
				const minutes = this.padZero(date.getMinutes());
				return `${hour}:${minutes} ${year}-${month}-${day} `;
			},
			padZero(num) {
				return num < 10 ? '0' + num : num;
			},
			getSrc() {
					let url = `${this.IP}/shop_head/${this.order.buyer.uid}.jpg`
					this.axios.head(url).then(res => {
						if (res.status == 200) {
							this.order.buyer.head_img = url
						}
						this.$forceUpdate();
					}).catch(error => {
						// 处理错误  
						this.order.buyer.head_img = `${this.IP}/shop_head/normal.jpg`
					});;;
				// console.log(this.shops);
			},
			getData() {

				this.axios.post(`${this.IP}/get_order`, {
					token: this.getStorage('token'),
					ordernum: this.$route.query.ordernum
				}).then(res => {
					console.log(res);
	
					// 企业名
					this.order.buyer = res.data.buyer;
					this.order.seller = res.data.seller;
					this.order.timestamp = res.data.shop.timestamp;
					this.order.ID = res.data.orderNumber;
					// 交易重量
					this.order.content.weight = res.data.product_amount + 'kg';
					// 交易产品
					this.order.content.type = res.data.productName;
					// 配送方法
					this.order.type = res.data.trade_type;
					if (this.order.type == 1) {
						this.order.type = "企业上门";
					} else {
						this.order.type = "自送上门";
					}
					// 发货地
					this.order.location = res.data.from_where;
					// 收货地
					this.order.station = res.data.to_where;
					// 进度
					this.order.status = res.data.trade_status;
					this.order.trade_status_log = res.data.trade_status_log;
					this.getSrc();
				})

			},
		}
	}
</script>

<style scoped>
	.who_buy {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 1vw;
		margin: 1vw;
		border-bottom: 1px solid #ebebeb;
		padding-bottom: 2vw;
	}

	.who_buy_img {
		padding-right: 3vw;
	}

	.who_buy_img img {
		width: 128px;
	}

	.who_buy_detail div {
		font-size: 32px;
		margin-left: 2vw;
	}

	.card_con {
		padding: 2vw;
		margin: 2vw;
		font-size: 32px;
		/* background-color: #f1f1f1; */
		border-radius: 20px;
	}

	.box {
		position: relative;
		height: 1vw;
		display: flex;
		width: 100%;
		margin-bottom: 6vw;
	}

	.box_title {
		position: absolute;
		left: 0;
		letter-spacing: 1vw;

	}

	.box_info {
		display: inline-block;
		position: absolute;
		width: 80%;
		text-align: right;
		/* 文字右对齐 */
		direction: rtl;
		/* 文字从右到左 */
		right: 0;
		letter-spacing: .2vw;
		

	}
	.statis_box{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.statis_log{
		direction: rtl;
	}

	.trade_process {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.normal_style {
		padding: 1vw;
		margin: 1vw;
		border: 4px solid darkgray;
		background-color: #f2f2f2;
	}

	.has_not_been_done {
		padding: 1vw;
		margin: 1vw;
		border: 4px solid deepskyblue;
		background-color: #f2f2f2;
	}

	.has_been_done {
		padding: 1vw;
		margin: 1vw;
		border: 4px solid red;
		background-color: #f2f2f2;
	}
</style>